import React from 'react'
// ===================================================================== Temp
import Table from '#cpt/temp/Table'
import SearchForm from '#cpt/temp/SearchForm'
import SubmitForm from '#cpt/temp/SubmitForm'
// ===================================================================== 
const { $fn, $Lazy, $http } = window
// ===================================================================== Lazy
const Modal 	= $Lazy.state(()=>import('@antd/modal'))
const message 	= $Lazy.file(()=>import('@antd/message'))
// ===================================================================== 
const Index = function( { 
		title = '', children, width='90%', minWidth, onOk, height, okText, close, table, submit, search, api, clearKeys=true,  clear=true, refresh=true,
		flex=true, scroll = false, keyStr = 'selectedKeys', okDisabled, onInit, enter=true, reset=true,
		idStr, type=0,
		prefix, suffix,
		noSubmit, onRefresh, onClear, getSubmit, bodyStyle, bodyClassName, hasOkDisabled = true, onIf, closable,noCancel
}){
	const {  submitLoading, forms, formData } = this.state
	return (
		<Modal
			width 		= { width }
			height 		= { height }
			minWidth	= { minWidth }
			onRef		= { ref => this.modal = ref }
			title		= { title }
			loading 	= { submitLoading }
			enter		= { enter }
			isFullScroll = { scroll }
			isFlex 		= { flex }
			okText		= { okText }
			okDisabled	= { okDisabled ? okDisabled : (hasOkDisabled && this.state[keyStr] && !$fn.hasArray(this.state[keyStr]))  }
			noFooter 	= { noSubmit }
			bodyStyle	= {{ padding:0 }}
			closable 	= { closable }
			noCancel 	= { noCancel }
			onInit		= { onInit }
			close		= { ()=>{
				if(close){
					close?.()
				}else{
					$fn.clearKeys.call(this)
				}
			} }
			open 		= { () => {
				if(reset){
					this.searchFormRef?.reset?.()
				}else{
					this.searchFormRef?.submit()
				}
			}}
			onOk		= { submit ? null : () => {
				if(getSubmit){
					const submit = getSubmit(this.state.selectedKeys, this.state.selectedRows)
					this.submit = {...this.submit, ...submit}
				}
				if(!noSubmit){
					if(onOk){
						onOk(this.state.selectedKeys, this.state.selectedRows)
					}else{
						if(onIf){ 
							if(!onIf(this.state.selectedKeys, this.state.selectedRows)) return
						}
						$http.submit(null,api, { param:this.submit } ).then(data=>{
							// 关闭弹窗
							this.modal.close()
							// 提示
							message.then(f=>f.success('操作成功'))
							// 回调
							$fn.delay(()=>{
								// 清除
								if(onClear){
									onClear()		
								}else{
									if(clear){
										this.props.onClear?.()
									}
									if(clearKeys === true){
										$fn.clearKeys.call(this)
									}
								}
								//刷新
								if(onRefresh){
									onRefresh(data)
								}else{
									this.props.onRefresh?.(data)
								}
								if(refresh){
									$fn.delay(this?.fetch)
								}
							})
						})
					}
				}
			} }
		>
			{
				!children ? (
					<div className={`abs_full ${ forms && !prefix ? 'pt5' : '' } ${bodyClassName ? bodyClassName : 'fv'}`}
						 style={{ 
							padding:forms && !prefix ? '5px 10px 0' : '10px 10px 0',
							...bodyStyle
						}}
					>
						{/* 前插入组件 */}
						{ prefix }
						{/* 搜索 */}
						{ forms ? SearchForm.call(this, { noRefresh:true, ...search, code:false }) : null }
						{/* 表格 */}
						{ Table.call(this, { idStr, type, wrapClassName:'mlr', ...table }) }
						{/* 提交表单 */}
						{
							formData && <div className='p10'>{SubmitForm.call(this,{ api, msg:title,onRefresh, onClear, ...submit })}</div>
						}
						{/* 后插入组件 */}
						{ suffix }
					</div>
				) : <div className={bodyClassName} style={{padding:'0 10px', ...bodyStyle}}>{children}</div>
			}
		</Modal>
	)
}
export default Index